<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.baidu.com" target="_blank" title="链接的标题">mylink</a>
    <!-- 
        Element：a标签，元素对象a
        Attribute：href,target,title:元素对象a里面的属性
        Text：mylink，元素对象里面的文本内容
     -->
    <h1 id="header1">11111</h1>
    <h2 id="header2">22222</h2>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <p class="p1">1111</p>
    <p class="p1">2222</p>

    <input type="text" name="username">
    <input type="text" name="username">

    <h3 name="title">33333</h3>
    <span name="biaoti">44444</span>
    <strong>33333</strong>
    <div class="box">
        <ul>
            <li>
                <a href="#">55555555</a>
            </li>
            <strong>strong</strong>
        </ul>
    </div>
    <div class="box">
        <ol>
            <li>
                <a href="#">666666</a>
            </li>
            <strong>strong11111</strong>
        </ol>
    </div>
</body>

</html>
<script>
    //一.DOM的概念：
    //1.即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。
    //DOM的核心：document文档，document对象。
    //标签，元素，元素节点都可以使用，都表示标签本身。叫法不一样。
    //Element:元素(元素对象)
    //Attribute:元素对象里面的属性
    //Text:元素对象里面的文本

    //二.查找元素对象。
    // 1.getElementById(id选择器的名称)获取特定 ID 元素的节点--最优(id选择器具有唯一性)
    // var box = document.getElementById('header1');
    // var box1 = document.querySelector('#header1');
    // var box2 = document.querySelector('h1');
    // console.log(box);
    // console.log(box1);
    // console.log(box2);
    // console.log(header1); //id选择器具有唯一性，可以直接通过id名称获取(早期的写法)

    // 2.getElementsByTagName(标签名称)通过标签名称获取相同元素节点列表，返回类数组，使用[0]来获取
    // var list = document.getElementsByTagName('li');
    // console.log(list); //[li, li, li, li]
    // console.log(list[0]);
    // console.log(document.getElementsByTagName('h1')[0]);

    // 3.getElementsByClassName()获取相同类名的节点列表（IE8及以下不支持），返回类数组
    // var pList = document.getElementsByClassName('p1');
    // console.log(pList); //[p.p1, p.p1]
    // console.log(pList[0]);
    // console.log(pList[1]);

    // 4.getElementsByName():通过名称获取元素节点列表.
    // var inputList = document.getElementsByName('username');
    // console.log(inputList); //[input, input]
    // console.log(inputList[0]);
    // console.log(document.getElementsByName('biaoti')[0]);

    // 5.querySelector()通过选择器获取元素，如果获取多个只返回第一个。
    // var aElement = document.querySelector('.box ul li a');
    // var strongElement = document.querySelector('.box ol strong');
    // console.log(aElement);
    // console.log(strongElement);

    // 6.querySelectorAll()通过选择器获取元素，可同时获取多个元素，类数组。
    // console.log(document.querySelectorAll('.box'));
    // console.log(document.querySelectorAll('.box')[0]);
    // console.log(document.querySelectorAll('.box')[1]);
</script>